import { ElButton } from 'element-plus'
import { ShowEditDialog } from './components/Edit.vue'
import { EditDialogType } from '/@/components/QsEditDialog'
import { Menu } from '/@/api/auth/menu'

interface Role extends Omit<defs.common.Role, 'menus'> {
  menus?: Menu[]
}

export const columns: Columns<
  Role,
  {
    'show-edit': ShowEditDialog
    delete: (id?: number) => Promise<void>
  }
> = [
  {
    title: '角色名称',
    key: 'name',
  },
  {
    title: '是否开启',
    key: 'isEnabled',
    customRender: ({ row }) => {
      return <span>{row.isEnabled ? '开启' : '关闭'}</span>
    },
  },
  {
    title: '简介',
    key: 'introduction',
  },
  {
    width: 300,
    fixed: 'right',
    title: '操作',
    key: 'action',
    customRender: ({ row }, emit) => {
      return (
        <>
          <ElButton
            link
            type='primary'
            onClick={() =>
              emit('show-edit', {
                type: EditDialogType.EDIT,
                data: row,
              })
            }
          >
            编辑
          </ElButton>
          <ElButton type='danger' link onClick={() => emit('delete', row.id)}>
            删除
          </ElButton>
        </>
      )
    },
  },
]
